<template>
    <div class="card-container"  @click.stop="handleClick">
      <!-- 图片区域，绑定父组件传入的路径 -->
      <img 
        :src="markerCode.markerPath" 
        :alt="markerCode.markerName"
        class="card-image"
      />
      
      <!-- 文字说明区域 -->
      <div class="card-text">
        {{ markerCode.markerName }}
      </div>
    </div>
  </template>
  
  <script setup>
import { getCurrentInstance } from 'vue';

    const { proxy } = getCurrentInstance();
    // 定义接收的 props
    const props = defineProps({
        markerCode: {
        type: Object,
        required: true,
        validator: (value) => {
            // 校验对象必须包含指定属性
            return 'markerName' in value && 'markerPath' in value
        }
        }
    })

    //定义点击事件
    const emit = defineEmits(['componentClick'])

    // 点击事件处理
    const handleClick = () => {
    // 触发自定义事件并传递参数
    emit('componentClick', proxy.markerCode)
    }
  </script>
  
  <style scoped>
  .card-container {
    width: 36%;
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden;
  }
  
  .card-container :active{
    transition: transform 0.2s;
    border-width: 2px;
    border-color: aqua;
    transform: scale(0.98);

}

  .card-image {
    width: 100%;
    height: 150px;
    object-fit: cover;
  }
  
  .card-text {
    padding: 12px;
    text-align: center;
    font-size: 14px;
    color: #333;
  }
  </style>